<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <!--[if lt IE 9]>
   <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
   <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script> -->
    <!--[endif]---->
    <title>海南省生态环境监测中心资产管理软件</title>
    <link href="<%=request.getContextPath()%>/css/cas/cas.css" rel="stylesheet">
<%--    <link rel="icon" href="/cas/favicon.ico" type="image/x-icon">--%>
</head>
<body id="cas"
      style="background:url(<%=request.getContextPath()%>/images/cubebg.png) #020b1d; background-repeat: no-repeat;background-position: center;">
<div id="container">
    <!--<header>

      <h1><img src="/cas/image/protalLog.png"><a id="TestSpring" href="http://www.mxg.com:12081/TestSpring/show.jsp"><font color="white" size="4px"></font></a></h1>

    </header>-->


    <style>
        /* fix: 如果需要修改chrome自动填充表单的样式，打开以下样式注释 */
        /*input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-transition-delay: 99999s;
            -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
        }*/

        img {
            max-width: 100%;
        }

        .clear:after {
            content: "";
            width: 0;
            height: 0;
            font-size: 0;
            clear: both;
            overflow: hidden;
            display: block;
            visibility: hidden;
        }

        .lt {
            float: left;
            /*margin-top: 50px;*/
            /*margin-bottom: 50px;*/
            width: 331px;
            /*height: 276px;*/
            border-right: 1px solid rgba(0, 220, 250, 0.1);
        }

        .rt {
            position: relative;
            float: right;
            margin: 0;
            width: 368px;
            height: 366px;
        }

        .rowbox {
            width: 331px;
        }

        .lbox1 {
            float: left;
            margin: 20px 0 0 40px;
            color: #d3e7f7;
            font-size: 14px;
        }

        .lbox2 {
            float: right;
            margin-right: 40px;
            margin-top: 22px;
            margin-bottom: 0px;
            color: #53718d;
            font-size: 12px;
            position: relative;
        }

        .lbox3 {
            float: left;
            width: 251px;
            height: 24px;
            color: #53718d;
            font-size: 14px;
            text-decoration: none;
            margin: 10px 40px 0px 40px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .lbox3:hover {
            color: #00dcfa;
        }

        .lbox4 {
            float: right;
            margin-right: 40px;
            margin-top: 22px;
            margin-bottom: 0px;
            color: #53718d;
            font-size: 12px;
            text-decoration: none;
            position: relative;
        }

        .lbox4:hover {
            color: #00dcfa;
        }

        .notice-none {
            color: #53718d;
            font-size: 14px;
            margin: 20px 0 0 40px;
        }

        .box {
            border: 1px;
        }

        .boxLeft {
            margin-top: 30px;
            /*margin-left: 134px;*/
            margin-bottom: 0;
            /*width: 100px;*/
            height: 50px;
            font-size: 20px;
            color: #53718d;
        }


        #login {
            position: fixed;
            left: 50%;
            top: 40%;
            margin-left: -350px;
            margin-top: -233px;
            width: 700px;
            height: 366px;
            background-image: url("<%=request.getContextPath()%>/images/loginbg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            /*background-color: #fff;
            border-radius: 9px;*/
        }

        .boxcenter {
            width: 1920px;
            height: 900px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: auto;
            margin-left: -960px;
            margin-top: -450px;
        }

        .logofont {
            margin-left: 48px;
            color: #22abd8;
            font-size: 25px;
            font-family: Microsoft YaHei;
        }

        .checkbox1 {
            margin-left: 47px;
            padding: 15px;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 1px;
        }
    </style>

    <div class="box" id="login">
        <div class="lt">
            <div class="notice-none" style="margin:10px;margin-top: 15px;margin-left: 18px;">
                <img src="<%=request.getContextPath()%>/images/login-3.png" style="width: 340px;height: 335px;">
            </div>
        </div>
        <div class="rt">
            <div class="boxLeft" style="padding-left: 10px;padding-right: 10px">农污处理系统远程监测及运维管理平台</div>
            <form id="fm1" action="/cas/login" method="post">
                <section class="row">
                    <input id="username" name="username" class="required" tabindex="1" placeholder="用户名" accesskey="n"
                           type="text" value="" size="25" autocomplete="off">
                </section>
                <section class="row">
                    <input id="password" name="password" class="required" tabindex="2" placeholder="密码" accesskey="p"
                           type="password" value="" size="25" autocomplete="off">
                </section>
                <%--                <section class="row">--%>
                <%--                    <input type="text" class="form-control captcha" style="width:43%;margin-right:10px;" id="captcha" name="captcha" placeholder="验证码" tabindex="3" autocomplete="off">--%>
                <%--                    <a id="changeCaptcha" href="javascript:void(0);"><img style="height:35px;" id="kaptcha" src="<%=request.getContextPath()%>/images/login-1.gif" align="absmiddle"></a>--%>

                <%--                </section>--%>

                <section class="row" style="margin-bottom: 50px;position:absolute; ">
                    <input class="btn-submit" name="submit" accesskey="l" value="登录" tabindex="4" type="submit"
                           style="margin-top: 40px;">
                </section>
            </form>
        </div>
    </div>
    <script src="<%=request.getContextPath()%>/huazhi/lib/cas/bootstrap/jquery-1.11.0.min.js"></script>
    <script src="<%=request.getContextPath()%>/huazhi/lib/cas/bootstrap/bootstrap.min.js"></script>
    <link href="<%=request.getContextPath()%>/css/cas/jquery.confirm.css" rel="stylesheet">
    <script src="<%=request.getContextPath()%>/huazhi/lib/cas/jquery-confirm/jquery-confirm.js"></script>
    <script type="text/javascript">
        $(function () {
            /*$.confirm({
                'title'		: '系统使用通知',
                'message'	:
                    '1）用户正访问政府的信息系统。<br/>2）系统的使用过程可能被监视、记录并受到审计。<br/>3）禁止对系统进行越权使用，否则将承担法律责任。<br/>4）一旦使用该系统，则表明同意受到监视和记录。',
                'buttons'	: {
                    '是'	: {
                        'class'	: 'blue',
                        'action': function(){
                        }
                    },
                    '否'	: {
                        'class'	: 'gray',
                        'action': function(){
                            var link1=$("#logout").attr("href");
                            window.location.href=link1;
                            /!* $('#logout').click(); *!/
                        }
                    }
                }
            });	*/

            // $('#changeCaptcha').click(function () {
            //     $("#kaptcha").hide().attr('src', 'captcha.jpg?' + Math.floor(Math.random() * 100)).fadeIn();
            // });

        });
    </script>
    <script src="<%=request.getContextPath()%>/huazhi/lib/cas/js/cas.js"></script>
</div>
</body>
</html>